<template>
    <a-col :span="span" class="ivz-form-item ivz-item-draggable" @click.stop="activeMetaTo">
      <div class="ivz-idc-item" :class="activeClass">
        <a-form-item :label="model.title" :label-col="model.labelCol" :name="meta.id"
           :wrapper-col="model.wrapperCol" :extra="model.extra" @click.native.stop="switchTab">
          <a-input v-if="meta.type == 'text'" v-model:value="model[meta.id]" :placeholder="model.placeholder"
                   :allowClear="model.clear" :read-only="model.readonly" :disabled="model.disabled">
<!--            <a-icon slot="prefix" v-if="model.prefix" :type="model.prefix" />-->
<!--            <a-icon slot="suffix" v-if="model.suffix" :type="model.suffix" />-->
          </a-input>
          <a-tree v-else-if="meta.type == 'tree'" :disabled="model.disabled"
                  :replaceFields="{title: 'label', key: 'value'}" :treeData="model.options"
                  :checkable="model.checkable" v-model:value="model[meta.id]" />
          <a-rate v-else-if="meta.type == 'rate'" :disabled="model.disabled" :allowHalf="model.allowHalf"
                  :count="model.count" v-model:value="model[meta.id]" />
          <a-slider v-else-if="meta.type == 'slider'" :disabled="model.disabled"
                    v-model:value="model[meta.id]" :min="model.min" :max="model.max"
                    :step="model.step" :marks="model.marks" :range="model.range" />
          <a-switch v-else-if="meta.type == 'switch'" :checkedChildren="model['checkedChildren']"
                    :disabled="model.disabled" v-model:value="model[meta.id]"
                    :unCheckedChildren="model['unCheckedChildren']"/>
<!--          <a-upload v-else-if="meta.type == 'upload'" :disabled="model.disabled">-->
<!--              <a-button><a-icon type="upload" /> 点击上传 </a-button>-->
<!--          </a-upload>-->
          <a-select v-else-if="meta.type == 'select'" :placeholder="model.placeholder"
                    :options="model.options" :allowClear="model.clear" :read-only="model.readonly"
                    :mode="model.mode" v-model:value="model[meta.id]" :maxTagCount="model.maxTagCount"
                    :showSearch="model.showSearch" :disabled="model.disabled" />
          <a-radio-group v-else-if="meta.type == 'radio'" :options="model.options"
                  :disabled="model.disabled" v-model:value="model[meta.id]" />
          <a-cascader v-else-if="meta.type == 'cascade'" :placeholder="model.placeholder"
                  :options="model.options" :allowClear="model.clear" :read-only="model.readonly"
                  :disabled="model.disabled" v-model:value="model[meta.id]" />
          <a-mentions v-else-if="meta.type == 'mentions'" :placeholder="model.placeholder"
                  :options="model.options" :allowClear="model.clear" :read-only="model.readonly"
                  :disabled="model.disabled" :prefix="model.prefix" :split="model.split" v-model:value="model[meta.id]">
            <a-mentions-option v-for="item in model.options" :key="item.value" :value="item.value">{{ item.label }}</a-mentions-option>
          </a-mentions>
          <a-auto-complete v-else-if="meta.type == 'complete'" :placeholder="model.placeholder"
                      :options="model.options" :allowClear="model.clear" :read-only="model.readonly"
                      :disabled="model.disabled" v-model:value="model[meta.id]"/>
          <a-textarea v-else-if="meta.type == 'textarea'" :placeholder="model.placeholder"
                  :autoSize="{maxRows: 2}" :allowClear="model.clear" :read-only="model.readonly"
                  :disabled="model.disabled" v-model:value="model[meta.id]" />
          <ivz-date-time v-else-if="meta.type == 'date'" :placeholder="model.placeholder"
                  :allowClear="model.clear" :read-only="model.readonly" :disabled="model.disabled"
                  :type="model['dateType']" :format="model.format" :showTime="model.showTime"
                  :showToday="model.showToday" v-model:value="model[meta.id]" :valueFormat="model.valueFormat" />
          <a-checkbox-group v-else-if="meta.type == 'checkbox'" :options="model.options" v-model:value="model[meta.id]" />
          <a-tree-select v-else-if="meta.type == 'stree'" :placeholder="model.placeholder"
                 :treeData="model.options" :allowClear="model.clear" :read-only="model.readonly"
                 :disabled="model.disabled" v-model:value="model[meta.id]" :multiple="model.multiple" />
          <a-input-number v-else-if="meta.type == 'number'" :placeholder="model.placeholder"
                :allowClear="model.clear" :read-only="model.readonly" :disabled="model.disabled"
                :precision="model.precision" style="width: 100%" :min="model.min"
                :max="model.max" :step="model.step" v-model:value="model[meta.id]" />
          <a-input-password v-else-if="meta.type == 'password'" v-model:value="model[meta.id]"
                :placeholder="model.placeholder" :visibilityToggle="model.visibilityToggle" />
          <IvzForeignForm v-else-if="meta.type == 'quote'" :meta="meta" :model="model"/>
          <IvzForeignForm v-else-if="meta.type == 'foreign'" :meta="meta" :model="model"/>
        </a-form-item>
        <div class="ivz-item-opera">
            <span class="ivz-io-icon" @click.stop="delItem">
                <ivz-icon type="iz-icon-delete" :style="{color: '#ffffff', fontSize: '18px'}"></ivz-icon>
            </span>
        </div>
      </div>
    </a-col>
</template>

<script>
import {IvzDateTime} from "@/components/functional";
import {mapGetters, mapMutations} from 'vuex'
import {getFormTabMetas} from "@/metas/FormTabMetas";
import EditMetas from "@/components/EditMetas";
import Utils from "@/utils/basic.utils";
import {EventBus, EventType} from "@/event";
import ActiveMetaMixin from "@/components/mixins/ActiveMetaMixin";
import IvzForeignForm from "@/components/IvzForeignForm.vue";

export default {
  name: "IvzFormItem",
  components: {IvzForeignForm, IvzDateTime},
  props: ["meta", "type"],
  mixins: [ActiveMetaMixin],
  computed: {
    ...mapGetters(['editTabModel']),
    span() {
      let formSpan = this.model['span'];
      let editSpan = 24 / this.editTabModel['column'];
      return formSpan > 0 ? formSpan : editSpan;
    }
  },
  data() {
      return {
        model: {}
      }
  },
  created() {
    let tabMetas = this.meta['tabMetas'];
    if(Utils.isBlank(tabMetas)) {
      this.meta['tabMetas'] = getFormTabMetas(this.meta.type);

      this.model = this.meta['tabModel'];
      this.model['id'] = this.meta.id;
      // this.model[this.meta.id] = null;
      this.model['field'] = this.meta.id;
      this.model['type'] = this.meta.type;
      this.model['title'] = this.meta.name;

      this.initFormTabMeta(this.meta);
      this.activeMetaTo();
    } else {
      this.model = this.meta['tabModel'];
      this.meta['tabMetas'] = getFormTabMetas(this.meta.type);
    }
  },
  updated() { },
  methods: {
    ...mapMutations(['switchActiveMetaTo', 'initFormTabMeta', 'switchPathTo']),
    activeMetaTo() {
      this.switchActiveMetaTo(this.meta);
      EventBus.publish(EventType.switchTab, 'basic')
    },
    switchTab(tab) {
      this.switchActiveMetaTo(this.meta);
      if(this.meta.type == 'quote' || this.meta.type == 'foreign') {
        return;
      } else {
        EventBus.publish(EventType.switchTab, 'form')
      }
    },
    delItem() {
      this.$emit("delMetaItem", this.meta);
    },
    typeSearch(value, meta) {
      meta.options = value ? meta.options.filter(item => item.value.includes(value)) : meta.options;
    },
    resolverItemToMeta(valid) {
      let itemMetas = EditMetas.getItemMetas(this.meta.type);
      for(let meta of itemMetas) {
          if(meta.metas && meta.metas.length > 0) {
              for(let item of meta.metas) {
                  if(item.rules) {
                      if(!this.model[item.field]) {
                          this.activeHandle();
                          this.$msg.warningMessage(`${item.title}必填`);
                          return false;
                      }
                  }
              }
          }
      }

      return EditMetas.resolverItemToMeta(this.model, this.global)
    }
  },
  // unmounted() {
  //   console.log("xia zai ")
  // }
}
</script>

<style scoped>
.ivz-form-item {
  height: 68px;
  position: relative;
}
</style>
